<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimal-ui">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <% include statsheader %>


</head>
<body>
<% include statsabove %>
<div id="wrapperService">
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>




    <div id='content'>

      

        <div id='maincontent'>
          <div id='introtop'>
            <div class='welcomemessage'>
                  Welcome to InfraNodus, <em><%= user.name %></em>. Using this platform you can visualize any text as a network graph. 
              </div>
              <a href="javascript:" onclick="$('#menuLink').click();" class="bigbuttontop">List Your Existing Graphs</a>
              <a href="javascript:" id="manual" class="bigbuttontop">Read the Manual</a>
              <div class='welcometitle'>Try out some applications to see how it works:</div>
          </div> 
          <div id="appslist">
            
            <a href="/<%= user.name %>/edit" id="analytica"><div class="appbox"><div class="appbox_image"><img src='../images/app-notes.png'></div><div class="appbox_text">Add a new text: visualizion, analysis, and topic modeling</div></div></a>
            <a href="/<%= user.name %>/edit" id="explore"><div class="appbox"><div class="appbox_image"><img src='../images/app-explore.png'></div><div class="appbox_text">Explore any domain of knowledge or a new topic</div></div></a>          
            <a href="/<%= user.name %>/edit" id="insight"><div class="appbox"><div class="appbox_image"><img src='../images/app-insight.png'></div><div class="appbox_text">Generate new ideas, find the gaps in your knowledge</div></div></a>          
            <!-- <a href="/<%= user.name %>/edit" id="notes"><div class="appbox"><div class="appbox_image"><img src='../images/app-notes.png'></div><div class="appbox_text">Add your notes and research ideas to see how they all connect</div></div></a> -->
            <!-- <a href="/<%= user.name %>/edit" id="tldr"><div class="appbox"><div class="appbox_image"><img src='../images/app-textanalytics.png'></div><div class="appbox_text">Visualize any text as a graph to discover the patterns within</div></div></a> -->
            <a href="/<%= user.name %>/edit"  id="seo"><div class="appbox"><div class="appbox_image"><img src='../images/app-seo.png'></div><div class="appbox_text">Search engine optimization: find the keyword gaps.</div></div></a>
            <a href="/import/evernote"><div class="appbox"><div class="appbox_image"><img src='../images/app-evernote.png'></div><div class="appbox_text">Import Evernote notes and see how they all connect</div></div></a>
            <a href="/twitter?context=twitter" id="twitter"><div class="appbox"><div class="appbox_image"><img src='../images/app-twitter.png'></div><div class="appbox_text">Discover the main topics in a Twitter hashtag or username feed</div></div></a>
            <a href="/google?fornode=text+visualization&context=google" id="google"><div class="appbox"><div class="appbox_image"><img src='../images/app-google.png'></div><div class="appbox_text">SEO analysis: discover patterns in Google search results</div></div></a>
            <a href="/importurl"><div class="appbox"><div class="appbox_image"><img src='../images/app-wiki.png'></div><div class="appbox_text">Get an overview of any Wikipedia article or any URL page</div></div></a>
            <a href="/importrss"><div class="appbox"><div class="appbox_image"><img src='../images/app-rss.png'></div><div class="appbox_text">Visualize news or any RSS feed to discover the main topics</div></div></a>
            <a href="/<%= user.name %>/edit" id="speech"><div class="appbox"><div class="appbox_image"><img src='../images/app-mic.png'></div><div class="appbox_text">Speech to graph: visualize your words as a network</div></div></a>
            <a href="/import/youtube"><div class="appbox"><div class="appbox_image"><img src='../images/app-youtube.png'></div><div class="appbox_text">Visualize YouTube video captions to understand what it's about</div></div></a>
            <a href="/import/files"><div class="appbox"><div class="appbox_image"><img src='../images/app-import.png'></div><div class="appbox_text">Advanced import options: plain text files, Gephi, PDFs, CSV</div></div></a>
            <a href="https://noduslabs.com/category/tutorials/"><div class="appbox"><div class="appbox_image"><img src='../images/app-helpbook.png'></div><div class="appbox_text">Watch video tutorials, case studies, learn how it works</div></div></a>
              <a href="/<%= user.name %>/edit" id="tuto"><div class="appbox"><div class="appbox_image"><img src='../images/app-tutorial.png'></div><div class="appbox_text">Step-by-step tutorial: how to add and process the text</div></div></a>

          </div>

          <div class="teaser">
            <br>
            Follow our interactive tutorial to start creating your own graphs:
          </div>
          <a href="/<%= user.name %>/edit" id="start" class="bigbutton">Start Step-by-Step Tutorial</a>
          <br>
            <div class="teaser">
            The methods used in this tool are outlined in this research paper: <em>Paranyushkin, D (2019). InfraNodus: Generating Insight Using Text Network Analysis, Proceeding WWW'19, The World Wide Web Conference, 3584-3589, San Francisco (<a href="http://bit.ly/infrasiteacm" rel="nofollow">ACM library</a>, <a href="http://bit.ly/infrapdfhomepage">PDF</a>)</em> Please, use it for citations. 
                <br><br>
              All the graphs you create and the data you generate can be shared using a URL link or embedded to other websites, exported as images, .csv, Excel or .gexf files for further analysis and visualization.<br><br>
              We also encourage you to share your experiments using #infranodus on Twitter and other platforms, so we can inspire each other.

            </div>

          <div class="teaser">
            <br>
            You are welcome to check our <a href="https://help.infranodus.com">support / FAQ site</a>, take the <a href="http://noduslabs.com/courses/text-network-analysis-for-cognitive-stimulation/">free online course on Text Network Analysis</a>, <a href="/#tutorials" target="_blank">watch video tutorials</a>, read the <a href="http://noduslabs.com/category/tutorials/" target="_blank">case studies</a> and
            post your questions, problems, and feature requests on <a href="https://github.com/noduslabs/infranodus/issues" target="_blank">GitHub</a> or using #infranodus on Twitter.
            <br>&nbsp;<br>&nbsp;<br>
            <a href="https://twitter.com/intent/tweet?button_hashtag=InfraNodus&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #InfraNodus</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            <br>&nbsp;<br>&nbsp;<br>
          &nbsp;

            <br>&nbsp;<br>&nbsp;<br>
          </div>

        </div>


    </div>




</div>
<div id="manualFrame">
    <div id="insideIFrame"><span id="loadingMes">Loading the manual...</span>
        <iframe id="manualIFrame" class="manualIFrame" width="450" height="100%" data-src="https://help.infranodus.com" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>
    ;(function(){

      function toggleClassForElement(element, className) {
        var classes = element.className.split(/\s+/),
            length = classes.length,
            i = 0;

        for(; i < length; i++) {
          if (classes[i] === className) {
            classes.splice(i, 1);
            break;
          }
        }
        // The className is not found
        if (length === classes.length) {
            classes.push(className);
        }

        element.className = classes.join(' ');
    }

        var cleared_to_submit = 0;

        $('#manual').click(function() {
          let layout = document.getElementById('layout');
          toggleClassForElement(layout, 'sidebar');

          if ($('#layout').hasClass('sidebar')) {
              $('#manual').text('Close the Manual');
              $('#manualFrame').show();
          }
          else {
              $('#manual').text('Read the Manual');
              $('#manualFrame').hide();
          }
          
          let iframe = document.getElementById('manualIFrame');

          if (!iframe.getAttribute('src'))  {
              $("#insideIFrame").css('background','url(/images/loading-large.gif) center center no-repeat');
              iframe.setAttribute('src', iframe.getAttribute('data-src'));
              $('#manualIFrame').load(function(){
                  $("#loadingMes").remove();
                  $("#insideIFrame").css('background','');
              });
          }
        });

        $('form#submitform').submit(function(event){

            if(cleared_to_submit){
                cleared_to_submit = 0;
                return;

            }else{

                event.preventDefault();

                $(this).find('input[type=submit]').attr('disabled', 'disabled');

                if ($("#extractfilter").prop("checked")) {
                    var current_query = $("#search").val();
                    $("#go_next_add").val(current_query);
                }

                cleared_to_submit = 1;

                $('form')[0].submit();  //resubmit form

            }

        });

      var newcontextlong = new Date().toISOString().slice(2,16).replace(/-/g,"").replace(/:/g,"");
      var newcontextshort = new Date().toISOString().slice(2,10).replace(/-/g,"");
      var newcontextshortsec = new Date().toISOString().slice(2,10).replace(/-/g,"").replace(/:/g,"")

      document.getElementById("twitter").href += newcontextshort;
      document.getElementById("google").href += newcontextshort;
      // document.getElementById("newlist").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=newcontext&newcontextname=" + newcontextlong;
      document.getElementById("analytica").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=tldr";      
      // document.getElementById("tldr").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=tldr&forced_walkthrough=1";      
      document.getElementById("explore").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=explore&forced_walkthrough=1";      
      document.getElementById("insight").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=insight&forced_walkthrough=1";      
      document.getElementById("seo").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=seo&forced_walkthrough=1";      
      document.getElementById("speech").href = "/<%= user.name %>/" + newcontextlong + "/edit?speech=1&walkthrough=mic";
      
      document.getElementById("start").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=default&forced_walkthrough=1";
      document.getElementById("tuto").href = "/<%= user.name %>/" + newcontextlong + "/edit?walkthrough=default&forced_walkthrough=1";


      $("#addNewContext").on('tap', function(e) {

          $("#addcontextinput").css("visibility", "visible");
          $("#add").css("visibility", "visible");
          $("#addcontextname").focus();


      });

      $('#addcontextinput').submit(function(e) {
          e.preventDefault(); // to stop the form from submitting
          if ($('#addcontextname').val().length > 0) {
              var contextredirect = $('#addcontextname').val();
              contextredirect = contextredirect.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g,"");
              contextredirect = contextredirect.replace(/[^\w]/gi, '');
              window.location.href = "/<%= user.name %>/" + contextredirect + '/edit';
          }

      });


    })();
</script>




<% include statsbelow %>
</body>
</html>
